<template>
    <div id="app">
      <!-- 主体内容 -->
      <keep-alive :include="include">
        <!-- 需要缓存的视图组件 -->
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>

import axios from 'axios';
export default {
  name: "App",
  data() {
    return {
      include: []
    };
  },
  computed: {},
  beforeDestroy() {
    this.$store.commit("updateKeepAliveInclude", []);
  },
  watch: {
    $route(to, from) {
      // 如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
      if (to.meta.keepAlive) {
        this.include.indexOf(to.name) === -1 && this.include.push(to.name);
      }
      // 如果 要 form(离开) 的页面是 keepAlive缓存的，
      // 再根据 deepth 来判断是前进还是后退
      if (from.meta.keepAlive && to.meta.deepth <= from.meta.deepth) {
        var index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
      this.$store.commit("updateKeepAliveInclude", this.include);
    }
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      // axios.create({
      //   baseURL: "http://localhost:8081"
      // })
      axios.defaults.baseURL = 'http://localhost:8081';
      axios.post(
        // {
          // method: "post",
          "/City/All"
          // url: "/City/All",
          // baseURL: "http://localhost:8081"
        // }
        ,null,
        {
          headers: {
            "Content-Type": "application/x-www-from-urlencoded"
          }
        }
      )
      .then(res => {
        console.log(res);
      }).catch(res => {
        console.error(res);
      })
    }
  }
};
</script>
<style lang="less" scoped>
@import "./assets/css/reset.less";
</style>
